<template>
    <div>
        <div class="info-box text-center">
            <my-back-btn path="/disk/all?path=/"></my-back-btn>
            <v-container fluid>
                <v-row>
                    <v-col>
                        <v-hover v-slot:default="{ hover }">
                            <v-avatar size="100px">
                                <v-img :src="avatarSrc">
                                    <div
                                            v-if="hover"
                                            class="d-flex v-card--reveal"
                                            @click="selectAvatar()"
                                    >
                                        修改头像
                                        <v-file-input
                                                id="imageInput"
                                                v-model="image"
                                                accept="image/*"
                                                style="display: none"
                                        ></v-file-input>
                                    </div>
                                </v-img>
                            </v-avatar>
                        </v-hover>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col>
                        用户名：{{user.username}}
                    </v-col>
                </v-row>
                <v-row>
                    <v-col>
                        邮箱： {{user.email}}
                    </v-col>
                </v-row>
                <v-row>
                    <v-col>
                        <v-btn outlined color="primary" @click="$router.push('/user-center/update-username')">修改用户名</v-btn>
                        <v-btn outlined color="primary" @click="$router.push('/user-center/update-password')" class="ml-1">修改密码</v-btn>
                        <v-btn outlined color="primary" @click="$router.push('/user-center/update-email')" class="ml-1">修改邮箱</v-btn>
                    </v-col>
                </v-row>
            </v-container>
        </div>

        <div class="info-box">
            <div class="text-center text-subtitle-1">
                登录记录 - 最近30次
                <v-tooltip right>
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon color="primary">mdi-alert-circle-outline</v-icon>
                        </v-btn>
                    </template>
                    <div>1.移动端登录，由于运营商是随机分配IP，往往存在与实际登录地不符的情况</div>
                    <div>2.若使用VPN或代理联网的，登录地无法准确记录</div>
                    <div>3.部分网络代理商的服务，存在IP地址不稳定的问题</div>
                </v-tooltip>
            </div>
            <v-simple-table height="300px">
                <template v-slot:default>
                    <thead>
                    <tr>
                        <th class="text-left">设备类型</th>
                        <th class="text-left">IP地址</th>
                        <th class="text-left">登录地点</th>
                        <th class="text-left">登录时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in logList" :key="item.id">
                        <td>{{ item.type }}</td>
                        <td>{{ item.ip }}</td>
                        <td>{{ item.address }}</td>
                        <td>{{ item.createTime }}</td>
                    </tr>
                    </tbody>
                </template>
            </v-simple-table>
        </div>
    </div>
</template>

<script>
    import { getAvatarLink } from "../../util";
    import MyBackBtn from "./MyBackBtn";

    export default {
        name: "MyUserInfo",
        components: {MyBackBtn},
        mounted() {
            this.getUserInfo();
            this.getAvatarLink();
            this.getLoginLogList();
        },
        data() {
            return {
                user: {
                    username: '',
                    email: ''
                },
                image: null,
                avatarSrc: '',
                logList: []
            }
        },
        methods: {
            getAvatarLink,
            getUserInfo() {
                let _this = this;
                _this._get({
                    url: "user/info"
                }).then(rsp => {
                    _this.user = rsp.data;
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                })
            },
            selectAvatar() {
                document.getElementById('imageInput').click();
            },
            getLoginLogList() {
                let self = this;
                self._get({
                    url: 'user/login-log'
                }).then( rsp => {
                    self.logList = rsp.data;
                }).catch( error => {
                    self.loglist = [
                        {id: 0, ip: 'error', type: 'error', address: 'error', createTime: 'error'}
                    ]
                })
            }
        },
        watch: {
            image() {
                let _this = this;
                if (_this.image !== null) {
                    let fileReader = new FileReader();
                    fileReader.onload = () => {
                        _this.$store.commit("setImageSrc", fileReader.result);
                        _this.$router.push("/user-center/update-avatar");
                    }
                    fileReader.readAsDataURL(_this.image);
                }
            }
        }
    }
</script>

<style scoped>
    .info-box {
        background-color: white;
        margin: 20px auto;
        padding: 10px;
        width: 600px;
        border-radius: 10px;
    }

    .v-card--reveal {
        align-items: center;
        bottom: 0;
        justify-content: center;
        opacity: .7;
        position: absolute;
        width: 100%;
        height: 100%;
        color: white;
        background-color: black;
        cursor: pointer;
    }
</style>